<template>
  <div class="knowledge">
    <!-- 表单 -->
    <el-form ref="searchForm" :model="search" style="padding: 24px 12px">
      <!-- 输入框 -->
      <div class="form">
        <el-form-item
          label="名称"
          style="padding-left: 12px; padding-right: 12px"
          class="formitem"
          prop="title"
        >
          <el-input v-model="search.title" placeholder="请输入页面名称" />
        </el-form-item>
        <el-form-item
          label="状态"
          prop="status"
          style="padding-left: 12px; padding-right: 12px"
          class="formitem"
        >
          <el-select v-model="search.status">
            <el-option value="publish" label="已发布" />
            <el-option value="draft" label="草稿" />
          </el-select>
        </el-form-item>
      </div>
      <!-- 按钮 -->
      <div class="button">
        <el-button type="primary" @click="submitForm">查询</el-button>
        <el-button @click="resetForm">重置</el-button>
      </div>
    </el-form>

    <!-- 内容 -->
    <div class="content">
      <div class="button">
        <a-button type="primary" @click="showDrawer"> + 新建 </a-button>
      </div>
      <!-- 知识小册的卡片 -->
      <div class="main">
        <div class="card">
          <el-col
            v-for="item in KnowledgeList"
            :key="item.id"
            :span="8"
            class="littleitem"
          >
            <el-card :body-style="{ padding: '0px' }">
              <img :src="item.cover" class="image">
              <div class="title">
                <p>{{ item.title }}</p>
                <p class="description">{{ item.summary }}</p>
              </div>
              <ul class="actions">
                <!-- 编辑 -->
                <li>
                  <span @click="toEdit(item.id)">
                    <svg
                      viewBox="64 64 896 896"
                      focusable="false"
                      data-icon="edit"
                      width="1em"
                      height="1em"
                      fill="currentColor"
                      aria-hidden="true"
                    >
                      <path
                        d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"
                      />
                    </svg>
                  </span>
                </li>
                <!-- 发布线上or设为草稿 -->
                <li @click="changeStatus(item)">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="
                      item.status === 'publish' ? '设为草稿' : '发布线上'
                    "
                    placement="top"
                  >
                    <span>
                      <svg
                        viewBox="64 64 896 896"
                        focusable="false"
                        data-icon="cloud-download"
                        width="1em"
                        height="1em"
                        fill="currentColor"
                        aria-hidden="true"
                      >
                        <path
                          d="M624 706.3h-74.1V464c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v242.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.7a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9z"
                        />
                        <path
                          d="M811.4 366.7C765.6 245.9 648.9 160 512.2 160S258.8 245.8 213 366.6C127.3 389.1 64 467.2 64 560c0 110.5 89.5 200 199.9 200H304c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8h-40.1c-33.7 0-65.4-13.4-89-37.7-23.5-24.2-36-56.8-34.9-90.6.9-26.4 9.9-51.2 26.2-72.1 16.7-21.3 40.1-36.8 66.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4a245.6 245.6 0 0152.4-49.9c41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10C846.1 454.5 884 503.8 884 560c0 33.1-12.9 64.3-36.3 87.7a123.07 123.07 0 01-87.6 36.3H720c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h40.1C870.5 760 960 670.5 960 560c0-92.7-63.1-170.7-148.6-193.3z"
                        />
                      </svg>
                    </span>
                  </el-tooltip>
                </li>
                <!-- 设置 -->
                <li>
                  <span @click="change(item)">
                    <svg
                      viewBox="64 64 896 896"
                      focusable="false"
                      data-icon="setting"
                      width="1em"
                      height="1em"
                      fill="currentColor"
                      aria-hidden="true"
                    >
                      <path
                        d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
                      />
                    </svg>
                  </span>
                </li>
                <!-- 删除 -->
                <li @click="del(item.id)">
                  <!-- <li> -->
                  <a-popconfirm
                    title="确认删除?"
                    ok-text="确认"
                    cancel-text="取消"
                    @confirm="confirm(item.id)"
                    @cancel="cancel"
                  >
                    <span>
                      <svg
                        viewBox="64 64 896 896"
                        focusable="false"
                        data-icon="delete"
                        width="1em"
                        height="1em"
                        fill="currentColor"
                        aria-hidden="true"
                      >
                        <path
                          d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
                        />
                      </svg>
                    </span>
                  </a-popconfirm>
                </li>
              </ul>
            </el-card>
          </el-col>
        </div>
      </div>

      <!-- 分页 -->
      <div class="page">
        <el-pagination
          :current-page="1"
          :page-sizes="[4, 8, 12, 16, 20]"
          :page-size="8"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 点击新建出现的弹窗 -->
    <a-drawer
      v-model="list"
      title="新建知识库"
      placement="right"
      :closable="false"
      :visible="visible"
      :after-visible-change="afterVisibleChange"
      width="600px"
      @close="onClose"
    >
      <div class="ant-drawer-body">
        <!-- 名称 -->
        <div class="form-item">
          <label for="title">名称</label>
          <div class="con">
            <a-input v-model="list.title" />
          </div>
        </div>
        <!-- 描述 -->
        <div class="form-item">
          <label for="summary">描述</label>
          <div class="con">
            <a-textarea
              v-model="list.summary"
              :auto-size="{ minRows: 3, maxRows: 5 }"
            />
          </div>
        </div>
        <!-- 评论 -->
        <div class="form-item">
          <label for="title">评论</label>
          <div class="con">
            <a-switch
              v-model="list.isCommentable"
              default-checked
              @change="onChange"
            />
          </div>
        </div>
        <!-- 上传oss -->
        <div class="form-item">
          <label for="upload">封面</label>
          <div class="con">
            <div class="ant-spin-nested-loading">
              <span>
                <el-upload
                  class="ant-upload ant-upload-drag"
                  style="width: 100%; min-height: 160px"
                  action="https://creationapi.shbwyz.com/api/file/upload?unique=0"
                  :headers="headers"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <span
                    tabindex="0"
                    class="ant-upload ant-upload-btn"
                    role="button"
                  >
                    <div class="ant-upload-drag-container">
                      <p class="ant-upload-drag-icon">
                        <span
                          role="img"
                          aria-label="inbox"
                          class="anticon anticon-inbox"
                        ><svg
                          viewBox="0 0 1024 1024"
                          focusable="false"
                          data-icon="inbox"
                          width="1em"
                          height="1em"
                          fill="currentColor"
                          aria-hidden="true"
                        >
                          <path
                            d="M885.2 446.3l-.2-.8-112.2-285.1c-5-16.1-19.9-27.2-36.8-27.2H281.2c-17 0-32.1 11.3-36.9 27.6L139.4 443l-.3.7-.2.8c-1.3 4.9-1.7 9.9-1 14.8-.1 1.6-.2 3.2-.2 4.8V830a60.9 60.9 0 0060.8 60.8h627.2c33.5 0 60.8-27.3 60.9-60.8V464.1c0-1.3 0-2.6-.1-3.7.4-4.9 0-9.6-1.3-14.1zm-295.8-43l-.3 15.7c-.8 44.9-31.8 75.1-77.1 75.1-22.1 0-41.1-7.1-54.8-20.6S436 441.2 435.6 419l-.3-15.7H229.5L309 210h399.2l81.7 193.3H589.4zm-375 76.8h157.3c24.3 57.1 76 90.8 140.4 90.8 33.7 0 65-9.4 90.3-27.2 22.2-15.6 39.5-37.4 50.7-63.6h156.5V814H214.4V480.1z"
                          /></svg></span>
                      </p>
                      <p class="ant-upload-text">
                        点击选择文件或将文件拖拽到此处
                      </p>
                      <p class="ant-upload-hint">
                        文件将上传到 OSS, 如未配置请先配置
                      </p>
                    </div>
                  </span>
                </el-upload>
              </span>
            </div>
            <input
              v-model="url"
              type="text"
              class="ant-input"
              style="margin-top: 12px"
            >
            <button type="button" class="ant-btn" style="margin-top: 12px">
              <span>选择文件</span>
            </button>
          </div>
        </div>
        <!-- 取消、创建 -->
        <div
          style="
            position: absolute;
            bottom: 0px;
            width: 100%;
            border-top: 1px solid rgb(232, 232, 232);
            padding: 10px 16px;
            text-align: right;
            left: 0px;
            background: rgb(255, 255, 255);
            border-radius: 0px 0px 4px 4px;
          "
        >
          <button type="button" class="ant-btn" @click="onClose">
            <span>取 消</span>
          </button>
          <button
            type="button"
            class="ant-btn ant-btn-primary"
            style="margin-left: 8px"
            @click="onNew"
          >
            <span> {{ list.id?'更新':'创建' }}  </span>
            <!-- 有bug 点击编辑完，再点击新增，无法进行更改 -->
            <!-- <span v-if="flag">创 建</span>
            <span v-else>更 新</span> -->
          </button>
        </div>
      </div>
    </a-drawer>

    <!-- 点击选择文件，再弹一个框 -->

  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { getToken } from '../../utils/auth'
export default {
  data() {
    return {
      page: 1, // 当前页面
      pageSize: 8,
      visible: false,
      flag: true,
      search: {
        title: '',
        status: ''
      },
      id: '',
      list: {
        title: '',
        summary: '',
        isCommentable: '',
        cover: ''
      },
      imageUrl: '',
      headers: '',
      url: ''
    }
  },
  computed: {
    ...mapState({
      KnowledgeList: (state) => state.knowledge.KnowledgeList,
      pageCount: (state) => state.knowledge.pageCount
    })
  },
  created() {
    this.submitForm()
    this.headers = { authorization: `Bearer ${getToken()}` }
  },
  methods: {
    ...mapActions({
      getKnow: 'knowledge/getKnow',
      delKnow: 'knowledge/delKnowledge',
      newKnow: 'knowledge/newKnowledge',
      showKnow: 'knowledge/showKnowledge'
    }),
    // 一页几条数据
    async handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      const options = {}
      this.pageSize = val
      await this.getKnow({
        page: this.page,
        pageSize: this.pageSize,
        ...options
      })
    },
    // 当前页面是第几页
    async handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      // 赋值给page
      const options = {}
      this.page = val
      await this.getKnow({
        page: this.page,
        pageSize: this.pageSize,
        ...options
      })
    },
    resetForm() {
      console.log('重置')
      for (const key in this.search) {
        this.search[key] = ''
      }
    },
    async submitForm() {
      const options = {}
      for (const key in this.search) {
        this.search[key] && (options[key] = this.search[key])
      }
      // console.log(options);
      await this.getKnow({
        page: this.page,
        pageSize: this.pageSize,
        ...options
      })
    },
    // 点击新建，出现右边弹窗
    afterVisibleChange(val) {
      console.log('visible', val)
    },
    showDrawer() {
      this.visible = true
    },
    onClose() {
      this.visible = false
      for (const key in this.list) {
        this.list[key] = ''
      }
    },
    // 新建确认
    async onNew() {
      // console.log(this.list);
      if (this.flag) {
        await this.newKnow(this.list)
        this.visible = false
        await this.getKnow({
          page: this.page,
          pageSize: this.pageSize
        })
      } else {
        // console.log(this.list.id);
        await this.showKnow(this.list)
        await this.getKnow({
          page: this.page,
          pageSize: this.pageSize
        })
        this.visible = false
      }
    },
    onChange(checked) {
      console.log(`a-switch to ${checked}`)
    },
    del(id) {
      console.log(id)
      this.id = id
      console.log(this.id)
    },
    // 删除确认
    async confirm(e) {
      // console.log(e, id);
      this.$message.success('删除成功')
      await this.delKnow(this.id)
      this.getKnow()
    },
    // 删除取消
    cancel(e) {
      console.log(e.target)
      this.$message.error('不删除')
    },
    // 编辑 跳详情
    toEdit(id) {
      // console.log(id);
      this.$router.push(`/knowledge/editor/${id}`)
    },
    // 点击设置按钮回显数据
    change(item) {
      // console.log(item);
      this.visible = true
      // this.list.title = item.title
      // this.list.summary = item.summary
      // this.list.isCommentable = item.isCommentable
      // this.list.id = item.id
      // this.list.cover = imageUrl
      this.list = item
      this.flag = false
    },
    // 发布线上 或者 设为草稿
    async changeStatus(item) {
      console.log(item.status)
      if (item.status === 'publish') {
        // item.status='draft'
        await this.showKnow({ ...item, status: 'draft' })
        await this.getKnow({
          page: this.page,
          pageSize: this.pageSize
        })
      } else {
        // item.status='publish'
        await this.showKnow({ ...item, status: 'publish' })
        await this.getKnow({
          page: this.page,
          pageSize: this.pageSize
        })
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    handleAvatarSuccess(res, file) {
      console.log(res)
      this.imageUrl = URL.createObjectURL(file.raw)
      this.url = res.data.url
      this.list.cover = this.url
    }
  }
}
</script>

<style lang='scss' scoped>
.knowledge {
  padding: 24px;
  overflow: auto;
  background-color: #e7eaee;
  box-sizing: border-box;
}
.form {
  display: flex;
  flex-flow: row wrap;
  margin-left: -12px;
  margin-right: -12px;
  row-gap: 0px;
}
.el-form {
  background-color: #fff;
  margin-bottom: 16px;
}
.formitem {
  display: flex;
}
.button {
  display: flex;
  justify-content: flex-end;
}
.content {
  width: 100%;
  background: rgb(255, 255, 255);
  padding: 24px 12px;
  .main {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    color: #000;
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: "tnum";
    position: relative;
    .card {
      width: 100%;
    }
    .littleitem {
      width: 25%;
      max-width: 25%;
      row-gap: 0px;
      padding-left: 8px;
      padding-right: 8px;
      flex: 1 1 auto;
    }
    .littleitem img {
      width: 100%;
      height: 140px;
      border-radius: 2px 2px 0 0;
      margin-top: -1px;
      margin-right: -1px;
      margin-left: -1px;
    }
  }
}
.title {
  padding: 24px;
  p {
    overflow: hidden;
    color: #333;
    font-weight: 500;
    font-size: 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .description {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
  }
}
.actions {
  padding: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border-top: 1px solid #f0f0f0;
  li {
    width: 25%;
    float: left;
    margin: 12px 0;
    color: rgba(0, 0, 0, 0.85);
    text-align: center;
    span {
      position: relative;
      display: block;
      min-width: 32px;
      font-size: 14px;
      line-height: 1.5715;
      cursor: pointer;
      border-right: solid 1px #eee;
    }
  }
}
// 滑过高亮
.actions > li:hover {
  span {
    color: lightblue;
  }
}
.page {
  margin-top: 1.5rem;
  text-align: right;
}
.ant-drawer-body {
  flex: 1;
  overflow: auto;
  padding: 24px;
  font-size: 14px;
  line-height: 1.5715;
  word-wrap: break-word;
  .form-item {
    display: flex;
    align-items: center;
    padding: 4px 0;
    .con {
      flex: 1;
    }
  }
  .form-item > label {
    padding-right: 16px;
  }
  .avatar {
    width: 100%;
    min-height: 160px;
    display: block;
  }
}
</style>
